<template>
  <div class="bg-grey pb-60 ">
    <!--面包屑开始-->
    <div :class="animationClass">
      <div class="container">
          <h2 class="font-weight-900">{{albumName}}</h2>
          <div class="breadcrumb">
              <a href="index.html" rel="nofollow">相册</a>
              <span rel="nofollow"></span> {{albumName}}
          </div>
          <div class="bt-1 border-color-1 mt-30 mb-50"></div>
      </div>
    </div>
    <!--面包屑结束-->
    <!-- 相册内容开始 -->
    <div class="container">
    <el-card shadow="hover" ref="card" class="wow fadeInUp animated is-always-shadow">
      <div class="row">
      <div class="col-md-2 pt-20  " v-for="(item,index) in photoList" :key="index">
        <el-image class="border-radius-5 hover-up transition-normal" :src="item" :preview-src-list="photoList" lazy>
             <div slot="error" class="border-radius-5">
              <el-image style="border: 1px solid grey;" class="border-radius-5"
                src="http://s05u67537.hn-bkt.clouddn.com/vue-blog/08/30/1693357599635.jpg"
               ></el-image>
             </div>
        </el-image>
      </div>
      </div>

    </el-card>

    </div>
    </div>  
  

    <!-- 相册内容结束 -->


</template>

<script>
export default {
    data() {
      return {
        url: 'http://s05u67537.hn-bkt.clouddn.com/vue-blog/08/30/1693326923666.jpg',
        srcList: [
          'http://s05u67537.hn-bkt.clouddn.com/vue-blog/08/30/1693326923666.jpg',
          'http://s05u67537.hn-bkt.clouddn.com/vue-blog/08/30/1693327032742.jpg',
          'http://s05u67537.hn-bkt.clouddn.com/vue-blog/08/30/20230830003004.png',
          'http://s05u67537.hn-bkt.clouddn.com/vue-blog/08/30/262854fb52a2fbc1a2589bcd590a758.png',
          'http://s05u67537.hn-bkt.clouddn.com/vue-blog/08/30/_20230830002942.png',
          'http://s05u67537.hn-bkt.clouddn.com/vue-blog/08/30/_20230830003029.png',
          'http://s05u67537.hn-bkt.clouddn.com/vue-blog/08/30/_20230830003047.png',
          'http://s05u67537.hn-bkt.clouddn.com/vue-blog/08/30/_20230830003102.png',
          'http://s05u67537.hn-bkt.clouddn.com/vue-blog/08/30/_20230830003116.png',
          'http://s05u67537.hn-bkt.clouddn.com/vue-blog/08/30/_20230830003133.png',
          'http://s05u67537.hn-bkt.clouddn.com/vue-blog/08/30/_20230830003153.png',
          'http://s05u67537.hn-bkt.clouddn.com/vue-blog/08/30/_20230830003234.png',
        ],
        photoList: [],
        animationClass:' '
      }
    },
    mounted() {
      this.getAlbumList();
      this.animationClass='archive-header pt-20'
    },
    watch:{
      albumId(newCount, oldCount){
        this.getAlbumList();
      },
    },
    props: ['albumId', 'albumName'],
    methods:{
      async getAlbumList(){
       const res =  await this.$API.photo.getPhotoByAlbumId(this.albumId);
       if(res.code == 200){
          this.photoList = res.data.map(item => item.photoUrl);
       }else{
          this.$message({
            type:'error',
            message:'获取相册列表失败'
          })
       }
      }
    },
    beforeDestroy(){
      this.photoList = [];
    },
    beforeRouteUpdate(to, from, next) {
      if(this.animationClass.includes('wow fadeInUp animated'))
      {
        this.animationClass = 'archive-header pt-20';
        console.log('true')
      }
      this.animationClass += ' wow fadeInUp animated';
      next();
    }
}
</script>

<style>

</style>